<template>
  <div>
    <div>
      <el-tag effect="dark" class="my-tag">
        <svg class="icon" width="20" height="20" style="vertical-align: -4px">
          <use xlink:href="#icon-mendianshezhi"/>
        </svg>
        基础信息
      </el-tag>
      <el-form
        :model="webInfo"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="网站名称" prop="webName">
          <el-input v-model="webInfo.webName"></el-input>
        </el-form-item>

        <el-form-item label="网站标题" prop="webTitle">
          <el-input v-model="webInfo.webTitle"></el-input>
        </el-form-item>

        <el-form-item label="页脚" prop="footer">
          <el-input v-model="webInfo.footer"></el-input>
        </el-form-item>
      </el-form>
      <div class="myCenter" style="margin-bottom: 40px">
        <el-button type="primary" @click="saveRandomCover()">保存</el-button>
        <el-button type="danger" @click="resetForm()">重置所有修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      webInfo: {
        webName: "",
        webTitle: "",
        footer: "",
      },
      rules: {
        webName: [
          {required: true, message: "请输入网站名称", trigger: "blur"},
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "change",
          },
        ],
        webTitle: [
          {required: true, message: "请输入网站标题", trigger: "blur"},
        ],
        footer: [{required: true, message: "请输入页脚", trigger: "blur"}],
      },
    };
  },
  created() {
    this.getWebInfo();
  },

  mounted() {
  },
  methods: {
    //网站信息
    getWebInfo() {
      this.$createHttp.webInfo().then((res) => {
        if (res.code === 200) {
          this.webInfo = res.data;
        }
      });
    },

    //修改网站信息
    saveRandomCover() {
      this.$createHttp.updateWebInfo(this.webInfo).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },

    resetForm() {
      this.getWebInfo()
    }
  },
};
</script>

<style scoped>
.my-tag {
  margin-bottom: 20px !important;
  width: 100%;
  text-align: left;
  background: var(--lightYellow);
  border: none;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: var(--black);
}
</style>
